<template>
  <div class="home">
    <div class="box1">
      <dv-border-box-11 title="KGC数据可视化平台" :key="scoreConfig.key">
        <dv-scroll-board :config="scoreConfig"
                         style="width:95%;height:58%;padding-left: 30px;padding-top: 55px"/>
      </dv-border-box-11>
    </div>
    <div class="box4">
      <h3>成绩TOP5</h3>
      <dv-border-box-8 >
        <dv-scroll-ranking-board  class="salary" :config="salaryConfig" style="width:90%;height:80%;"/>
      </dv-border-box-8>
    </div>
    <div class="box5">
      <h3>专业人数</h3>
      <dv-border-box-1 >
        <dv-active-ring-chart :config="courseConfig" style="width:100%;height:100%"/>
      </dv-border-box-1>
    </div>
    <div class="box6">
      <h3>部门人数</h3>
      <dv-border-box-8 :reverse="true">
        <dv-capsule-chart class="job" :config="jobTimeConfig" style="width:85%;height:80%"/>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>

import instance from "@/request/request";

export default {
  name: 'HomeView',
  data() {
    return {
      key : 1,
      scoreConfig: {},
      salaryConfig: {},
      jobTimeConfig: {},
      //专业人数
      courseConfig: {}
    }
  },
  methods:{

    async scoreList() {
      let {data} = await instance.get("/score/getscorelist")
      let datas =  data.map(dt=>{
        return [dt.examTime,dt.studentName,dt.clazz,dt.score]
      })
      this.scoreConfig = {
        header: ['日期', '姓名', '班级', '成绩'],
        data: datas,
        headerBGC: '#000000',
        evenRowBGC: '',
        oddRowBGC: '',
        align: ['center', 'center', 'center', 'center']
      }
    },
    //成绩排行
    async scoretop(){
      let {data}= await  instance.get("/score/getscoretop")
      let datas=data.map(s=>{
        return{
          name:s.studentName,
          value:s.score
        }
      })
    this.salaryConfig={
      data: datas,
      unit: '分'
    }
    },
    //专业人数
    async getObject(){
      const {data} =await instance.get("/echart/ObjectCount");
      let datas=data.map(s=>{
        return{
          name:s.courseName,
          value:s.count
        }
      })
      this.courseConfig={
        radius: '40%',
        activeRadius: '45%',
        lineWidth: 10,
        showOriginValue: true,
        data: datas,
        digitalFlopStyle: {
          fontSize: 20
        }
      }
    },
    //部门人数
    async getDeptCount(){
      const {data}=await instance.get("/echart/deptCount")
      let datas=data.map(s=>{
        return{
          name:s.deptName,
          value:s.count
        }
      })
      this.jobTimeConfig={
        data:datas,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '人',
        showValue: true
      }
    }
  },
  created() {
    this.scoreList();
    this.scoretop();
    this.getObject();
    this.getDeptCount()
  }
}
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  /*background-color: #2b4b6b;*/
  /*设置网格布局*/
  display: grid;
  /*设置列数 第二个参数 每个盒子占用的份数*/
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.box1 {
  grid-column: span 3;
}

.box5, .box4, .box6 {
  position: relative;
}

.salary {
  position: absolute;
  top: 30px;
  left: 20px;
}

.job {
  position: absolute;
  top: 40px;
  left: 30px;
}

h3 {
  text-align: center;
  color: white;
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
}
</style>
